* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}
html {font-size: 100%;height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.clear {display: block;	}
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}
/*GENERIC STYLES*/
body { background: #f2f2f2;color: #222;-webkit-font-smoothing: antialiased;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.05em;font-weight: 400;height: auto !important;height: 100%;line-height: 1.6rem;min-height: 100%;}
/*NAV*/
	#nav{top:0px; margin:0px;}
	
	#navegacion header {
		background: linear-gradient(to left,rgb(255, 193, 7) 0,rgb(229, 76, 37) 100%);
		border-bottom: 1px solid rgba(0,0,0,.1);
		box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
		display: block;
		position: fixed;
		width: 100%;
		z-index: 1000;
		top:0px;
	}
	
	#navegacion header > nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		list-style: none;
		margin: 0;
		padding: 0;
		top:0px;
	}
	
		#navegacion header > nav > ul > li {
			flex: 0 1 auto;
			margin: 0;
			padding: 0;
			position: relative;
			transition: all linear 0.1s;	
		}
		
			#navegacion header > nav > ul > li:hover {
				background: rgba(58,162,173,1);
			}
			
			#navegacion header > nav > ul > li a + div {
				background: linear-gradient(to bottom,rgba(58,162,173,1) 0,rgba(62,188,207,0.96) 100%);;
				border-radius: 0 0 2px 2px;
				box-shadow: 0 3px 1px rgba(0,0,0,.05);
				display: none;
				font-size: 1rem;
				position: absolute;
				width: 195px;
			}
			
				#navegacion header > nav > ul > li:hover a + div {
					display: block;
				}
				
				#navegacion header > nav > ul > li a + div > ul {
					list-style-type: none;	
				}
				
					#navegacion header > nav > ul > li a + div > ul > li {
						margin: 0;
						padding: 0;
					}
					
						#navegacion header > nav > ul > li a + div > ul > li > a {
							color: rgba(255,255,255,.9);
							display: block;	
							font-size: .75rem;
							letter-spacing: 1.5px;
							padding: .25rem 1.5rem;
							text-decoration: none;
							text-transform: uppercase;
						}
						
							#navegacion header > nav > ul > li a + div > ul > li:hover > a {
								background-color: rgba(0,0,0,.15);	
							}
	
			#navegacion header > nav > ul > li > a {
				align-items: flex-start;
				color: #fff;
				display: flex;
				font-size: 1.55rem;
				font-weight: 200;
				letter-spacing: 1px;
				max-width: 130px;
				padding: 1rem 1.5rem;
				text-decoration: none;
				text-shadow: 0 1px 1px rgba(0,0,0,.1);
				transition: all linear 0.1s;
			}
			
				#navegacion header > nav > ul > li > a > div > span {
					color: rgba(255,255,255,.75);
					display: block;
					font-family: Georgia, "Times New Roman", Times, serif;
					font-size: .7rem;	
					font-style: italic;
					line-height: 1rem;
					max-width: 260px;
				}

		#wrap{margin-top:85px; padding:16px}
		#wrap h1 {margin: 16px 0px;text-transform: uppercase; font-size:32px;  font-family: "Times New Roman", Georgia, Serif;}
		#wrap h1{
		padding:16px 0px;
		font-weight: 400;
		color: #777;
		border-bottom: 1px solid #DDD;
}
			
		}
		#wrap section {}		
		#wrap section > header{width:100%; float:left; float: right; color: #aaa;}
		#wrap section > article{width:75%;float:left; padding:0% 0.5% 0% 0%; text-align: justify;}
		#wrap section > aside{width:25%; float:right; }
		#wrap section > aside figure{text-align:center;}
		#wrap section p{margin:16px 0px}
		#wrap section > footer{width:100%; bottom:0px; float:left;}
		#wrap section ol{margin-left:22px; line-height:1.8;}
		#wrap section ol > li{}
		#wrap section blockquote{margin-left:0px;}		
		
	
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.main {
    text-align: left;
    background: cornflowerblue;
}

.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}

@media all and (min-width: 600px) {
    .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
    .main    { flex: 3 0px; }
    .aside1 { order: 1; } 
    .main    { order: 2; }
    .aside2 { order: 3; }
    .footer  { order: 4; }
}


.capitalLetter
{
   float:left;
   color:black;
   font-size:60px;
   line-height:50px;
   padding:0px;
   margin-right: 5px;
}
.color-1{color:Coral}
.color-2{color:orange}